<template>
	<view class="content">
		<view class="search_box">
			<view class="relative">
				<input type="text" class="search_input" placeholder="输入搜索关健词..."/>
				<button type="submit" class="searchicon"><view class="coolc icon-search"></view></button>
			</view>
		</view>

		<view class="page-body">
			<scroll-view id="tab-bar" class="nav-left" scroll-y :scroll-top="scrollTop">
				<view v-for="(tab,index) in classifyData" :key="tab.cid" :class="['nav-left-item',tabIndex == index ? 'active' : '']" :id="tab.cid" :data-current="index" @click="tapTab(index)">
					<view class="bn ellipsis">{{tab.name}}</view>
				</view>
			</scroll-view>
			<swiper :current="tabIndex" class="nav-right" duration="300" @change="changeTab">
				
				<swiper-item v-for="(tabs,index1) in classifyData" :key="index1">
					<scroll-view scroll-y :scroll-top="scrollTop" class="scrollbox">
						<view class="top_ads"><img src="~@/static/class_ad.jpg"/></view>
						<view v-for="(item,i) in tabs.foods" :key="i" class="">
							<view class="totitle">
								<span class="classname">{{item.name}}</span>
								<i class="coolc icon-jiantouright"></i>
							</view>
							<view class="box">
								<view class="nav-right-item" v-for="(item,i) in item.classto" :key="i">
									<image :src="item.icon"/>
									<view>{{item.name}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
		</view>

	</view>
</template>

<script>
	import classifyData from '@/classify.data.js';
	export default {
		data(){
			return {
				scrollTop: 0,
				isClickChange: false,
				tabIndex: 0,
				classifyData:classifyData,
			}
		},
		onShow(){
			
		},
		methods: {
			async changeTab(e) {
				let index = e.detail.current;
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getElSize("tab-bar"),
					tabBarScrollTop = tabBar.scrolTop;
				let height = 0;

				for (let i = 0; i < index; i++) {
					let result = await this.getElSize("tab-bar");
					height += result.height;
				}
				let windowHeight = uni.getSystemInfoSync().windowHeight,
					nowElement = await this.getElSize("tab-bar"),
					nowHeight = nowElement.height;
				if (height + nowHeight - tabBarScrollTop > windowHeight) {
					this.scrollTop = height + nowHeight - windowHeight;
				}
				if (height < tabBarScrollTop) {
					this.scrollTop = height;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题
			},
			getElSize(id) { //得到元素的size
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select('#' + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			async tapTab(index) { //点击tab-bar
				if (this.tabIndex === index) {
					return false;
				} else {
					let tabBar = await this.getElSize("tab-bar"),
						tabBarScrollTop = tabBar.scrollTop;
					this.scrollTop = tabBarScrollTop;
					this.isClickChange = true;
					this.tabIndex = index;
				}
			}
		}
	}
</script>

<style lang="scss">
	page,.content { height:calc(100%)!important; }
	.page-body { width:100%; height:calc(100% - 120upx)!important; display:flex; background:#fff; overflow:hidden; }
	.nav { display:flex; width:100%; }
	.nav-left {
		width:30%; height:calc(100%)!important; background: #fafafa;

		.nav-left-item { 
			height:80upx; line-height:80upx; text-align:left; border-right:solid 1px #f1f1f1; border-bottom:solid 1px #f1f1f1; font-size:28upx;
			
			.bn { width:100%; height:80upx; line-height:80upx; padding:0 20upx 0  15upx; color:$font-color-999; }
		}
		.active { color:#8c0027; background:#fff; border-left:3px solid #8c0027; border-right:0; }
	}

	.nav-right { 
		width:70%; height:calc(100%)!important; 
		
		.top_ads { 
			 width:525upx; height:214.41upx; padding:20upx 20upx 0 20upx; 
			img { width:485upx; height:194.41upx; }
		}
		.scrollbox { width:100%; height:calc(100%)!important; }
		.totitle { 
			width:100%; height:70upx; line-height:76upx; padding:0 20upx; overflow:hidden; font-size:$font-base;
			
			.classname { display:block; float:left; color:$font-color-000;  }
			.coolc { display:block; float:right; color:$font-color-999; }
		}
		.box { width:100%; display:block; overflow:hidden; border-bottom:1px solid #f3f3f3; padding-bottom:20upx; }
		.nav-right-item { 
			width:33.33%; height:220upx; float:left; text-align:center; padding:20upx; font-size:28upx; background:#fff; color:$font-color-999;
			
			image { width:130upx; height:130upx; margin:0 auto; }
		}
	}
</style>